<template>
  <div class="container">
    <div class="app-container">
      <el-card class="salary-btn">
        <el-button size="mini" type="danger">设置</el-button>
        <el-button size="mini" type="primary">202402报表</el-button>
      </el-card>
      <el-card style="margin:10px 0;">
        <el-form class="form">
          <el-form-item label-width="120px" label="聘用形式：">
            <el-checkbox-group v-model="formatId">
              <el-checkbox label="正式" />
              <el-checkbox label="非正式" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label-width="120px" label="部门：">
            <el-checkbox-group v-model="formatId">
              <el-checkbox v-for="item in deptList" :key="item.id" :label="item.name" />
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card>
        <el-table
          :data="employeeList"
          :header-cell-style="{fontSize: '14px', backgroundColor: '#F5F6F8',color:'#909399'}"
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="序号"
            width="50"
          />
          <el-table-column
            prop="username"
            label="姓名"
            width="150"
          />
          <el-table-column
            prop="mobile"
            label="手机"
            width="180"
          />
          <el-table-column
            prop="workNumber"
            label="工号"
            width="180"
          />
          <el-table-column
            prop="formOfEmployment"
            label="聘用形式"
            width="100"
          >
            <template v-slot="{row}">
              <span>{{ row.formOfEmployment===1?'正式':'非正式' }} </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="departmentName"
            label="部门"
            width="180"
          />
          <el-table-column
            prop="timeOfEntry"
            label="入职时间"
            width="200"
          />
          <el-table-column
            prop="currentBaseSalary"
            label="工资基数"
            width="80"
          />
          <el-table-column
            label="津贴方案"
            width="120"
          >
            <span>0.00</span>
          </el-table-column>
          <el-table-column
            label="操作"
            width="260"
          >
            <template>
              <el-button size="small">查看</el-button>
              <el-button size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" align="middle" style="height: 60px;">
          <el-col :span="4">
            <el-pagination
              layout="prev, pager, next"
              :total="total"
            />
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getDepartmentList } from '@/api/department'
import { getSalaryList } from '@/api/salary'
import { getEmployeeList } from '@/api/employee'
export default {
  name: 'Salary',
  data() {
    return {
      formatId: [],
      deptList: [],
      queryParams: {
        yearMonth: 202402,
        opType: ''
      },
      salaryList: [],
      employeeList: [],
      total: 0,
      queryEmployee: {
        page: 1,
        pagesize: 10,
        keyword: '',
        departmentId: null
      }
    }
  },
  created() {
    this.getData()
    this.getSalaryList()
    this.getEmployeeList()
  },
  methods: {
    async getData() {
      this.deptList = await getDepartmentList()
    },
    async getSalaryList() {
      this.salaryList = await getSalaryList(this.queryParams)
    },
    async getEmployeeList() {
      const { total, rows } = await getEmployeeList(this.queryEmployee)
      this.employeeList = rows
      this.total = total
    }
  }
}
</script>

<style lang="scss" scoped>
.salary-btn {
  display: flex;
}
.form {
  padding: 20px;
}
</style>
